{%extends "base.html"%}
{%block title%}
题目编辑
{%endblock%}
{%block head%}
{%endblock%}
{%block body%}
<script>
    let args = getRequest();

    var problem_edit;
    $(document).ready(() => {
        problem_edit = new Vue({
            el: "#problem-edit",
            delimiters: ['{[', ']}'],
            data: {
                data: null,
                error_message: "",
                success_message: "",
                files: null,
                uploading: false,
                done: false,
                quickGenInput: "",
                quickGenOutput: "",
                quickGenScript: "",
                autoExtract: false,
                showFilesOnly: (Boolean(args.show_files))
            },
            computed: {
                file_list: function () {
                    const result = []
                    for (i = 0; i < this.data.files.length; i++) {
                        result.push(this.data.files[i].name);
                    }
                    return result;
                }
            },
            methods: {
                publicizeAllFiles() {
                    this.data.downloads = this.data.files.map(x => x.name);
                },
                unpublicizeAllFiles() {
                    this.data.downloads = new Array();
                },
                quickGenerateSubtask() {
                    let arrays;
                    try {
                        arrays = eval(this.quickGenScript);
                    } catch (err) {
                        showErrorModal(err);
                        return;
                    }
                    this.data.subtasks = [];
                    const makeInput = x => this.quickGenInput.replace("#", String(x));
                    const makeOutput = x => this.quickGenOutput.replace("#", String(x));
                    let score = parseInt(100 / arrays.length);
                    let lastScore = 100 - score * (arrays.length - 1);
                    for (let i = 0; i < arrays.length; i++) {
                        let array = arrays[i];
                        let subtask = {
                            name: "Subtask" + (i + 1),
                            score: i != arrays.length - 1 ? score : lastScore,
                            method: "sum",
                            testcases: [],
                            time_limit: 1000, memory_limit: 512, comment: ""
                        };
                        // let caseScore = parseInt(testcase.score / array.length);
                        // let caseLastscore = testcase.score - caseScore * (array.length - 1);
                        for (let j = 0; j < array.length; j++) {
                            subtask.testcases.push({
                                input: makeInput(array[j]), output: makeOutput(array[j])
                            })
                        }
                        this.data.subtasks.push(subtask);
                    }
                },
                regenerateFileList() {
                    $.post("/api/regenerate_filelist", { problem_id: this.data.id }).done(ctx => {
                        ctx = JSON.parse(ctx);
                        if (ctx.code) {
                            showErrorModal(ctx.message);
                            return;
                        }
                        this.files = ctx.data;
                        window.location.reload();
                    });
                },
                auto_generate: function () {
                    $("#auto-generate-modal").modal({
                        onApprove: function () {
                            problem_edit.data.subtasks = [];
                            const files = (problem_edit.file_list);
                            console.log(files);
                            const infiles = files.filter((x) => x.endsWith(".in"));
                            const tasks = [];
                            for (i in infiles) {
                                const file = infiles[i];
                                const name = file.substr(0, file.lastIndexOf("."));
                                const find_result = files.find((x) => (x == name + ".out" || x == name + ".ans"));
                                if (find_result) {
                                    tasks.push({ input: file, output: find_result });
                                }
                            }
                            tasks.sort((a, b) => {
                                if (a > b) return -1;
                                else if (a == b) return 0;
                                else return 0;
                            });
                            // var i = 0;

                            let subtask = { "name": "默认子任务", "score": 100, "method": "sum", "testcases": tasks, "time_limit": 1000, memory_limit: 512 };
                            problem_edit.data.subtasks = [subtask];

                        },
                        closable: false
                    }).modal("show");
                },
                modify_all: function (key, val) {
                    console.log("modifying " + key + " to " + val);
                    console.log(val);
                    for (i = 0; i < this.data.subtasks.length; i++) {
                        // (key, val)
                        Vue.set(this.data.subtasks[i], key, val)
                    }
                },
                add_subtask: function () {
                    this.data.subtasks.push({ 'name': 'Subtask', 'score': '30', 'method': 'sum', 'testcases': [], 'time_limit': 1000, 'memory_limit': 512, "comment": "" })
                },
                submit: function () {
                    this.success_message = this.error_message = false;
                    $.post("/api/update_problem", { id: this.data.id, data: JSON.stringify(this.data) }).done(ctx => {
                        ctx = JSON.parse(ctx);
                        if (ctx.code == 0) {
                            problem_edit.success_message = "提交成功！";
                        } else {
                            problem_edit.error_message = ctx.message;
                        }
                        $("html,body").animate({
                            scrollTop: 0
                        });
                    });
                },
                remove_file: function (evt) {
                    this.success_message = this.error_message = "";
                    const index = evt.target.getAttribute("data-index");
                    $.post("/api/remove_file", {
                        id: problem_edit.data.id,
                        file: problem_edit.data.files[index].name
                    }).done((ctx) => {
                        ctx = JSON.parse(ctx);
                        if (ctx.code) {
                            problem_edit.error_message = ctx.message;
                            return;
                        }
                        problem_edit.data.files = ctx.file_list;
                    });
                }, get_file: function (evt) {
                    this.files = evt.target.files;
                }, upload: function () {
                    var formdata = new FormData();
                    for (i = 0; i < this.files.length; i++) {
                        const val = this.files[i];
                        // console.log(val);
                        // console.log(val.name);
                        formdata.append(val.name, val, val.name);
                    }
                    // console.log(formdata);
                    this.uploading = true;
                    this.success_message = this.error_message = false;

                    let simpleXHR = (func) => {
                        let xhrObj = $.ajaxSettings.xhr();
                        xhrObj.upload.onprogress = e => {
                            let progress = $("#upload-progress-bar");
                            progress.progress({
                                percent: e.loaded / e.total * 100
                            });
                            $("#upload-progress-bar .label").text(
                                `已上传 ${parseInt(e.loaded / e.total * 100)}%`
                            );
                        };
                        return xhrObj;
                    };
                    $("#upload-progress-modal").modal('setting', 'closable', false).modal("show");
                    $.ajax({
                        url: "/api/upload_file/" + problem_edit.data.id,
                        type: "POST",
                        data: formdata,
                        contentType: false,
                        processData: false,
                        xhr: simpleXHR
                    }).done((ctx) => {
                        ctx = JSON.parse(ctx);
                        problem_edit.uploading = false;
                        $("#upload-progress-modal").modal("hide");
                        if (ctx.code) {
                            problem_edit.error_message = ctx.message;
                            return;
                        }
                        problem_edit.success_message = "上传成功！";
                        problem_edit.data.files = ctx.file_list;
                        console.log(ctx.file_list);
                    });

                }
            }
        });
        $.post("/api/get_problem_info", { id: parseInt(window.location.href.split("/").pop()) }).done(ctx => {
            ctx = JSON.parse(ctx);
            if (ctx.code != 0) {
                console.log("Bad problem id");
                console.log(ctx);
                showErrorModal(ctx.message);
                return;
            }
            problem_edit.data = ctx.data;
            problem_edit.data.newProblemID = ctx.data.id;
            problem_edit.done = true;
            problem_edit.$nextTick(() => {
                $('.tabular.menu .item').tab();
            });
        });
    });

</script>
<div style="top:10%;max-width: 1000px;">
    <div class="ui left aligned container" id="problem-edit" v-if="done">
        <div class="ui header">
            <h1>{[data.id]} - {[data.title]} (编辑中)</h1>
        </div>
        <div class="ui error message" v-if="error_message!=''">
            <div class="header">
                发生错误
            </div>
            <p>{[error_message]}</p>
        </div>
        <div class="ui success message" v-if="success_message!=''">
            <div class="header">
                执行成功
            </div>
            <p>{[success_message]}</p>
        </div>
        <div>
            <div class="ui top attached tabular menu">
                <a class="item " v-bind:class="{active:!showFilesOnly}" data-tab="tab1" v-if="!showFilesOnly">题面</a>
                <a class="item " v-bind:class="{active:showFilesOnly}" data-tab="tab2">题目数据</a>
                <a class="item " :href="'/show_problem/'+data.id">返回题目</a>

            </div>
            <div class="ui bottom attached tab segment " v-bind:class="{active:!showFilesOnly}" data-tab="tab1"
                v-if="!showFilesOnly">
                <div class="ui equal width form">
                    <div class="field">
                        <label>题目ID</label>
                        <!-- <div class="ui small label">{[data.id]}</div> -->
                        <input type="text" v-model.number="data.newProblemID">
                        <div>注意:修改题目ID后，所有正在使用此题目的比赛将无法正常访问.</div>
                    </div>
                    <div class="field">
                        <label>题目名</label>
                        <input type="text" v-model="data.title">
                    </div>
                    <div class="field">
                        <label>题目背景</label>
                        <textarea v-model="data.background" rows="5"></textarea>
                    </div>
                    <div class="field">
                        <label>题目内容</label>
                        <textarea v-model="data.content" rows="5"></textarea>
                    </div>
                    <div class="field">
                        <label>输入格式</label>
                        <textarea v-model="data.input_format" rows="5"></textarea>
                    </div>
                    <div class="field">
                        <label>输出格式</label>
                        <textarea v-model="data.output_format" rows="5"></textarea>
                    </div>
                    <div class="ui fields" v-for="k,v in data.example">
                        <div class="ui field">
                            <label>样例 {[v+1]} 输入</label>
                            <textarea rows="5" v-model="k.input"></textarea>
                            <div class="ui tiny red button" v-on:click="data.example.splice(v,1)">删除本组样例</div>
                        </div>
                        <div class="ui field">
                            <label>样例 {[v+1]} 输出</label>
                            <textarea rows="5" v-model="k.output"></textarea>
                        </div>
                    </div>
                    <div class="ui green button" v-on:click="data.example.push({input:'qwq',output:'qwq'})">
                        添加样例
                    </div>
                    <div class="field">
                        <label>提示</label>
                        <textarea rows="5" v-model="data.hint"></textarea>
                    </div>
                    <div class="ui field">
                        <div class="ui toggle checkbox">
                            <input type="checkbox" class="hidden" v-model="data.public">
                            <label @click="data.public=!data.public">公开</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ui bottom attached segment tab " v-bind:class="{active:showFilesOnly}" data-tab="tab2">
                <div class="ui header">
                    <h3>文件列表</h3>
                </div>
                <div>
                    <table class="ui table">
                        <thead>
                            <tr>
                                <th>编号</th>
                                <th>文件名</th>
                                <th>大小</th>
                                <th>操作</th>
                                <th v-if="!showFilesOnly">公开</th>
                                <th v-if="!showFilesOnly">编译时提供</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="val,i in data.files" v-if="!showFilesOnly||(data.downloads.includes(val.name))">
                                <td style="width: 50px">{[i+1]}</td>
                                <td>{[val.name]}</td>
                                <td>{[val.size]}({[val.size/1024]} KB)</td>
                                <td>
                                    <div class="ui buttons">
                                        <a class="ui tiny green button"
                                            :href="'/api/download_file/'+data.id+'/'+val.name" target="_blank">下载</a>
                                        <button class="ui tiny red button" v-on:click="remove_file" :data-index="i"
                                            v-if="!showFilesOnly">删除</button>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui toggle checkbox" v-if="!showFilesOnly">
                                        <input type="checkbox" class="hidden"
                                            :checked="data.downloads.includes(val.name)?1:null">
                                        <label :data="val.name"
                                            @click="data.downloads.includes(val.name)?(data.downloads.splice(data.downloads.indexOf(val.name),1)):data.downloads.push(val.name)">公开</label>
                                    </div>
                                </td>
                                <td>
                                    <div class="ui toggle checkbox" v-if="!showFilesOnly">
                                        <input type="checkbox" class="hidden"
                                            :checked="data.provides.includes(val.name)?1:null">
                                        <label :data="val.name"
                                            @click="data.provides.includes(val.name)?(data.provides.splice(data.downloads.indexOf(val.name),1)):data.provides.push(val.name)">编译时提供</label>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div v-if="!showFilesOnly">
                        <div class="ui form">
                            <div class="ui field">
                                <label>上传文件</label>
                                <input type="file" multiple id="files" v-on:change="get_file">
                            </div>
                            <p>当您上传的文件为zip压缩包时，将会自动解压并把根目录下的所有文件加入题目文件中</p>
                            <div class="ui small green submit button" v-on:click="upload"
                                v-bind:class="{loading:uploading}">
                                上传..
                            </div>
                            <div class="ui blue button" v-on:click="regenerateFileList">重新生成文件列表</div>
                            <div class="ui green button" v-on:click="publicizeAllFiles">公开全部文件</div>
                            <div class="ui red button" v-on:click="unpublicizeAllFiles">取消公开全部文件</div>


                        </div>
                        <div class="ui header">
                            <h3>评测数据设定</h3>
                        </div>
                        <div class="ui stacked segment">
                            <div class="ui container">
                                <div class="ui form">

                                    <div class="ui field">
                                        <label>SPJ文件名</label>
                                        <input type="text" v-model="data.spj_filename" placeholder="留空以不使用SPJ">
                                    </div>
                                    <div class="ui fields">
                                        <div class="ui field" :class="{disabled:!data.using_file_io}">
                                            <label>输入文件</label>
                                            <input type="text" v-model="data.input_file_name">
                                        </div>
                                        <div class="ui field" :class="{disabled:!data.using_file_io}">
                                            <label>输出文件</label>
                                            <input type="text" v-model="data.output_file_name">
                                        </div>
                                    </div>
                                    <div class="ui field">
                                        <div class="ui toggle checkbox">
                                            <input type="checkbox" v-model="data.using_file_io"
                                                @click="data.using_file_io=!data.using_file_io">
                                            <label>使用文件IO</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="ui green button" v-on:click="submit">提交</div>
                        </div>
                        <div class="ui header">
                            <h3>附加编译参数设定</h3>
                        </div>
                        <div class="ui stacked segment">
                            <table class="ui very basic celled table">
                                <thead>
                                    <tr>
                                        <th>语言正则表达式</th>
                                        <th>参数</th>
                                        <th>名称</th>
                                        <th>不可取消</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="line,i in data.extra_parameter">
                                        <td>
                                            <div class="ui input"> <input v-model="line.lang">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="ui input"><input v-model="line.parameter"></div>

                                        </td>
                                        <td>
                                            <div class="ui input">
                                                <input v-model="line.name">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="ui toggle checkbox">
                                                <input type="checkbox" v-model="line.force">
                                                <label>不可取消</label>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="ui tiny red circular icon button"
                                                v-on:click="data.extra_parameter.splice(i,1)">
                                                <i class="times icon"></i>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="ui left aligned container">
                                <div class="ui green button"
                                    v-on:click="data.extra_parameter.push({lang:'',parameter:'',name:''})">
                                    添加..
                                </div>
                            </div>
                        </div>
                        <div class="ui header">
                            <h3>快速生成子任务</h3>
                        </div>
                        <div class="ui stacked segment">
                            <div class="ui form">
                                <div class="ui fields">
                                    <div class="ui field">
                                        <label>输入文件名</label>
                                        <input type="text" v-model="quickGenInput">
                                    </div>
                                    <div class="ui field">
                                        <label>输出文件名</label>
                                        <input type="text" v-model="quickGenOutput">
                                    </div>
                                </div>

                                <div class="ui field">
                                    <label>生成脚本</label>
                                    <textarea v-model="quickGenScript"></textarea>
                                </div>
                                <p>在文件名中使用#作为占位符.</p>
                                <p style="color:red">进行本操作将会删除现有的所有子任务</p>
                                <p>具体使用说明见帮助.</p>
                                <div class="ui green submit button" v-on:click="quickGenerateSubtask">执行</div>
                            </div>
                        </div>
                        <div class="ui header">
                            <h3>子任务设定</h3>
                        </div>
                        <div class="ui stacked segment">
                            <div class="ui form">
                                <div class="ui fields">
                                    <div class="ui field">
                                        <label>统一修改内存</label>
                                        <input type="text"
                                            v-on:keyup.enter="modify_all('memory_limit',$event.target.value)"
                                            placeholder="按回车生效..">
                                    </div>
                                    <div class="ui field">
                                        <label>统一修改时限</label>
                                        <input type="text"
                                            v-on:keyup.enter="modify_all('time_limit',$event.target.value)"
                                            placeholder="按回车生效..">
                                    </div>
                                </div>
                                <div class="ui green button" @click="auto_generate">自动生成子任务</div>
                            </div>
                            <div class="ui divider"></div>
                            <div v-for="subtask,index in data.subtasks">

                                <div class="ui header">
                                    <h2>{[subtask.name]}</h2>
                                </div>
                                <div class="ui equal width form">
                                    <div class="ui fields">
                                        <div class="ui field">
                                            <label>子任务名</label>
                                            <input type="text" v-model="subtask.name">
                                        </div>
                                        <div class="ui field">
                                            <label>时间限制(ms,整数)</label>
                                            <input type="text" v-model="subtask.time_limit">
                                        </div>
                                        <div class="ui field">
                                            <label>内存限制(MB,整数)</label>
                                            <input type="text" v-model="subtask.memory_limit">
                                        </div>
                                    </div>

                                    <div class="ui fields">
                                        <div class="ui field">
                                            <label>计分方式</label>
                                            <select class="ui dropdown" v-model="subtask.method">
                                                <option value="min">取最小值</option>
                                                <option value="sum">取和</option>
                                            </select>
                                        </div>
                                        <div class="ui field">
                                            <label>子任务总分</label>
                                            <input type="text" v-model="subtask.score">
                                        </div>
                                    </div>
                                    <div class="ui field">
                                        <label>注释</label>
                                        <textarea rows="3" v-model="subtask.comment"></textarea>
                                    </div>
                                </div>
                                <table class="ui table">
                                    <thead>
                                        <tr>
                                            <th>测试点编号</th>
                                            <th>输入文件名</th>
                                            <th>输出文件名</th>
                                            <th>删除</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="testcase,index in subtask.testcases">
                                            <td>{[index+1]}</td>
                                            <td>
                                                <select class="ui dropdown" v-model="testcase.input">
                                                    <option v-for="file in file_list" :value="file">{[file]}</option>
                                                </select>
                                            </td>
                                            <td>
                                                <select class="ui dropdown" v-model="testcase.output">
                                                    <option v-for="file in file_list" :value=file>{[file]}</option>
                                                </select>
                                            </td>
                                            <td>
                                                <div class="ui tiny red circular icon button"
                                                    v-on:click="subtask.testcases.splice(index,1)">
                                                    <i class="times icon"></i>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="ui buttons">
                                    <div class="ui red button" v-on:click="data.subtasks.splice(index,1)">删除子任务</div>
                                    <div class="ui blue button"
                                        v-on:click="data.subtasks[index].testcases.push({input:'qwq',output:'qwq'})">
                                        增加测试点
                                    </div>
                                </div>
                                <div class="ui divider"></div>
                            </div>

                            <div class="ui container">
                                <div class="ui green button" @click="add_subtask">添加子任务</div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="ui left aligned container">
                <div class="ui green button" v-on:click="submit">提交</div>
            </div>

        </div>
        <div class="ui basic modal" id="no-perm-modal">
            <div class="ui icon header">
                <i class="error icon"></i>
                错误
            </div>
            <div class="content">
                <div class="ui center aligned container">
                    <p id="no-perm-text"></p>
                </div>
            </div>
            <div class="actions">
                <div class="ui green ok inverted button" onclick="window.location.href='/'">
                    <i class="checkmark icon"></i>
                    返回主页
                </div>
            </div>
        </div>
        <div class="ui modal" id="auto-generate-modal">
            <div class="ui header">
                警告
            </div>
            <div class="content">
                <p>自动生成子任务将会删除现有的所有子任务，并且添加一个新的子任务，这个子任务具有以下测试点</p>
                <p>对于文件列表中的任意一个文件[name].in,尝试在文件列表中找到[name].out或者[name].ans(两者都出现时取前者)</p>
                <p>并且把这两个文件作为一个测试点的输入和输出。</p>
                <p>假设得到的测试点个数为k，那么前k-1个测试点的分数均为floor(100/k),最后一个测试点的分数为100-(k-1)*floor(100/k),所有测试点的分数之和为100。</p>
            </div>
            <div class="actions">
                <div class="ui green approve button">
                    确定
                </div>
                <div class="ui blue cancel button">
                    取消
                </div>
            </div>
        </div>
        <div class="ui modal" id="upload-progress-modal">
            <div class="ui header">
                上传文件中...
            </div>
            <div class="content">
                <div class="ui teal progress" id="upload-progress-bar">
                    <div class="bar"></div>
                    <div class="label"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{%endblock%}